<template>
  <div class="student_card">
    <!-- 学生群体 -->
    <div class="group" @click="group">
      <div class="group_name">学生群体</div>

      <div class="group_option">
        <div class="option_name">{{ groups }}卡</div>
        <svg
          class="svgs"
          width="10px"
          height="6px"
          viewBox="0 0 10 6"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
          <title>icon</title>
          <desc>Created with Sketch.</desc>
          <g
            id="icon"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <path
              d="M4.64285714,5.30330086 L6.39488462e-14,0.707106781 L0.714285714,2.29725334e-13 L6.39488462e-14,0.707106781 L0.714285714,2.29281244e-13 L5,4.24264069 L9.28571429,2.29906999e-13 L10,0.707106781 L5.35714286,5.30330086 L5,5.65685425 L6.39488462e-14,0.707106781 L0.714285714,2.29725334e-13 L5,4.24264069 L4.28571429,4.94974747 L4.64285714,5.30330086 Z"
              id="形状结合"
              fill="#979797"
              fill-rule="nonzero"
            ></path>
          </g>
        </svg>
      </div>
    </div>
    <!-- 学校和卡号 -->
    <div class="select_import">
      <!-- 学校信息 -->
      <div v-show="cardtypes === 13" class="select_school" @click="btnschool">
        <div class="school_name">学校：</div>
        <div class="school_opt">
          <span :class="lists === '请选择学校' ? 'select_name' : 'selects'">{{
            lists
          }}</span>
          <svg
            class="svgs"
            width="10px"
            height="6px"
            viewBox="0 0 10 6"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
            <title>icon</title>
            <desc>Created with Sketch.</desc>
            <g
              id="icon"
              stroke="none"
              stroke-width="1"
              fill="none"
              fill-rule="evenodd"
            >
              <path
                d="M4.64285714,5.30330086 L6.39488462e-14,0.707106781 L0.714285714,2.29725334e-13 L6.39488462e-14,0.707106781 L0.714285714,2.29281244e-13 L5,4.24264069 L9.28571429,2.29906999e-13 L10,0.707106781 L5.35714286,5.30330086 L5,5.65685425 L6.39488462e-14,0.707106781 L0.714285714,2.29725334e-13 L5,4.24264069 L4.28571429,4.94974747 L4.64285714,5.30330086 Z"
                id="形状结合"
                fill="#979797"
                fill-rule="nonzero"
              ></path>
            </g>
          </svg>
        </div>
      </div>
      <!-- 卡号 -->
      <div class="card">
        <div class="card_name">卡号：</div>
        <!-- <input type="text" v-model="values" placeholder="请输入卡号" class="card_number"> -->
        <input
          type="tel"
          @input="values = values.replace(/[^\d]/g, '')"
          v-model="values"
          placeholder="请输入卡号"
          class="card_number"
        />
      </div>
    </div>
    <!-- 查询按钮 -->
    <div class="box">
      <div :class="btn_style ? 'but' : 'but but_style'" @click="btns">
        立即查询
      </div>
    </div>
    <!-- 遮罩层 -->
    <div :class="open ? 'shade' : 'node'" @click="cancel">
      <!-- 动画 -->
      <transition name="fade">
        <div
          v-if="open"
          :class="list.length <= 2 ? 'shade_name' : 'shade_name shade_names'"
          @click.stop="shade"
          ref="stu_list"
        >
          <!-- <div class="borders">大学生</div>
          <div>中小学生</div> -->
          <div
            v-for="(item, index) in list"
            :data-id="item.cardtype"
            :data-it="item.identityNo"
            :key="index"
            class="borders"
          >
            {{ item.schoolName }}
          </div>
        </div>
      </transition>
    </div>
    <!-- 查询结果 -->
    <div class="inquire" v-show="retCode != ''">
      <div class="result" v-show="retCode.retCode === '0000'">
        查询结果：卡状态{{ bizstname }}！
      </div>
      <div class="result" v-show="retCode.retCode != '0000'">
        查询结果：暂无查询到您的卡片信息。
      </div>
      <div class="message" v-show="retCode.retCode === '0000'">
        <p>您的卡片信息已同步在一卡通系统,当前可进行贴卡充值和延期操作。</p>
        <p>姓名：{{ names }}</p>
        <p v-show="retCode.idtype === '10'">教育ID：{{ retCode.idno }}</p>
        <p v-show="retCode.idtype === '01'">学号：{{ retCode.identityNo }}</p>
        <p v-show="retCode.idtype === '01'">身份证：{{ identity }}</p>
      </div>
      <div class="messages" v-show="retCode.retCode != '0000'">
        <p>1、学校信息未同步,请同学校相关人员审核确认。</p>
        <p>2、学片信息变更,学校尚未同步信息到一卡通。</p>
      </div>
    </div>
    <div class="Loding" v-if="LodingOpen">
      <Box />
    </div>
  </div>
</template>
<script>
import { Base64 } from "js-base64";
import md5 from "js-md5";
import Box from "../loading/box";
// import {_throttle} from '@/components/ulit/public'//节流方法
let swit = false; //变更开关
if (swit) {
  // 测试接口211.145.51.149:9990//本地192.168.104.30:21000
  var reqPathUrl =
    "https://xcxdev.bmac.com.cn/auth?userName=admin&password=Bmac@qW6FGrAnbM";
  var reqThemeUrl = "https://weixindev.bmac.com.cn/student/returnStu";
  var reqbtnUrl = "https://weixindev.bmac.com.cn/student/queryReal";
} else {
  // 生产接口
  var reqPathUrl = "https://xcx.bmac.com.cn/auth?userName=admin&password=admin";
  var reqThemeUrl = "https://xcx.bmac.com.cn/student/returnStu";
  var reqbtnUrl = "https://xcx.bmac.com.cn/student/queryReal";
}
export default {
  data() {
    return {
      values: "", //输入卡号
      open: false,
      groups: "大学生",
      cardtypes: 13, //学生类型码
      list: "",
      lists: "请选择学校",
      tokens: "",
      randomKey: "",
      identityNo: "", //大学码
      retCode: "",
      names: "",
      identity: "",
      schoollist: "",
      bizsts: {
        "00": "初始",
        "01": "正常",
        "02": "挂失",
        "03": "注销",
        "04": "禁用",
        "05": "临时",
        "06": "换卡",
      },
      bizstname: "",
      domain: "", //域名
      repPathUrl: "", //广告域名
      Authorization: "", //Basic c3dvcmQ6c3dvcmRfc2VjcmV0
      tokenPassword: "", //广告密码
      tokenName: "", //广告名字
      hubBaseUrl: "", //hub平台
      jwtBaseUrl: "",
      jwtBaseUrl1: "",
      LodingOpen: false,
    };
  },
  components: {
    Box,
  },
  computed: {
    //计算属性 监听所填数据是否完整能否提交
    btn_style: function () {
      if (
        this.cardtypes === 13 &&
        this.lists != "请选择学校" &&
        this.values != ""
      ) {
        return true;
      } else if (this.cardtypes === 12 && this.values != "") {
        return true;
      } else {
        return false;
      }
    },
  },
  mounted() {
    setTimeout(() => {
      BmacJSBridge.call("setTitle", {
        title: "学生卡查询",
      });
      BmacJSBridge.call("obtainClientBaseUrl", (seft) => {
        console.log("seft", seft);
        this.domain = seft.pay3BaseUrl;
        this.repPathUrl = seft.adBaseUrl;
        this.Authorization = seft.Authorization;
        this.tokenPassword = seft.adTokenPassword;
        this.tokenName = seft.adTokenName;
        this.hubBaseUrl = seft.hubBaseUrl;
        this.jwtBaseUrl = seft.jwtBaseUrl;
        console.log(seft.isProd, seft);
        // if(seft.isProd=='0'){
        //   console.log('pp',seft.shopSignBaseUrl)
        //     this.jwtBaseUrl1=seft.shopSignBaseUrl.split(":18082")[0]
        //     this.jwtBaseUrl=seft.adBaseUrl
        // }else{
        //       this.jwtBaseUrl=seft.jwtBaseUrl
        //       this.jwtBaseUrl1=seft.jwtBaseUrl
        // }
        this.$ajax.get(reqPathUrl).then((data) => {
          console.log("token", data);
          this.tokens = data.data.token;
          this.randomKey = data.data.randomKey;
          this.schoollists();
        });
      });
    }, 300);
  },
  methods: {
    schoollists() {
      this.$ajax
        .post(
          reqThemeUrl,
          {},
          {
            headers: {
              "content-type": "application/json",
              Authorization: "Bearer " + this.tokens,
            },
          }
        )
        .then((data) => {
          console.log(data);
          this.schoollist = data.data;
        });
      //  .catch((err) => {
      //   this.open = true
      // })
    },
    //点击学校
    btnschool() {
      //console.log('点击选择学校--------------------------',this.schoollist)
      let embedding = {
        eventID:"btnschool",
        extra:{
          name:"选择学校"
        },
      };
      BmacJSBridge.call("AddEventburyPoints",embedding,(data)=>{})
      if (this.schoollist.length == 0) {
        return;
      }
      this.list = this.schoollist;
      this.open = true;
      // this.$ajax.post(reqThemeUrl,{},{
      //     headers: {
      //       "content-type": "application/json",
      //       Authorization: "Bearer " + this.tokens
      //     }
      //   }
      // )
      // .then(data => {
      //   console.log(data.data)
      //   this.list = data.data
      //   this.open = true
      // })
      // .catch((err) => {
      //   this.open = true
      // })
    },
    // 点击选卡类型显示遮罩层选项
    group() {
      let embedding = {
        eventID:"group",
        extra:{
          name:"选择学生卡类型"
        },
      };
      BmacJSBridge.call("AddEventburyPoints",embedding,(data)=>{})
      this.list = [
        { cardtype: 13, schoolName: "大学生" },
        { cardtype: 12, schoolName: "中小学生" },
      ];
      this.open = true;
    },
    //点击遮罩层空余处取消
    cancel() {
      this.open = false;
    },
    //遮罩层列表委托事件所选类型
    shade(e) {
      //console.log(e.target.dataset.it,e.target.dataset.id)
      if (e.target.dataset.id) {
        this.lists = "请选择学校";
        this.groups = e.target.innerHTML;
        this.cardtypes = e.target.dataset.id * 1;
        this.open = false;
      } else {
        this.lists = e.target.innerHTML;
        this.identityNo = e.target.dataset.it;
        this.open = false;
      }
      //console.log(this.cardtypes)
    },
    //获取当前日期
    getDateString() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      var nowDate = JSON.stringify(year) + month + day;
      console.log("sh", nowDate);
      return nowDate;
    },
    //获取当前时间
    getTimeString() {
      var d = new Date();
      var my_hours = d.getHours();
      var my_minutes = d.getMinutes();
      var my_seconds = d.getSeconds();
      if (my_minutes < 10) {
        my_minutes = "0" + my_minutes;
      }
      if (my_seconds < 10) {
        my_seconds = "0" + my_seconds;
      }
      if (my_hours < 10) {
        my_hours = "0" + my_hours;
      }
      my_hours =
        typeof my_hours === "number" ? JSON.stringify(my_hours) : my_hours;
      my_minutes =
        typeof my_minutes === "number"
          ? JSON.stringify(my_minutes)
          : my_minutes;
      my_seconds =
        typeof my_seconds === "number"
          ? JSON.stringify(my_seconds)
          : my_seconds;
      var getTimeString = my_hours + my_minutes + my_seconds;
      return getTimeString;
    },
    //点击立即查询
    btns() {
      let embedding = {
        eventID:"studentCardQuery",
        extra:{
          name:"选择学校"
        },
      };
      BmacJSBridge.call("AddEventburyPoints",embedding,(data)=>{})
      if (this.btn_style) {
        this.LodingOpen = true;
        var data;
        //是否为大学生1000751038828938---1000751144521842
        data = JSON.stringify({
          reqDate: this.getDateString(),
          reqTime: this.getTimeString(),
          cardno: this.values,
          cardtype: this.cardtypes,
        });
        console.log(data);
        var base = Base64.encode(data);
        var str_aaa = base + this.randomKey;
        var md5xx = md5(str_aaa);
        var obj_a = JSON.stringify({
          object: base,
          sign: md5xx,
        });
        // console.log(obj_a,md5xx)
        //  console.log(Base64.decode(base))
        // console.log(this.tokens)
        this.$ajax
          .post(reqbtnUrl, obj_a, {
            headers: {
              "content-type": "application/json",
              Authorization: "Bearer " + this.tokens,
            },
          })
          .then((data) => {
            console.log(data);
            this.LodingOpen = false;
            if (data.data.code === 200) {
              var datas = JSON.parse(Base64.decode(data.data.object));
              console.log(datas);
              var idnos = datas.idno.split("");
              idnos.splice(3, 3, "*", "*", "*");
              this.identity = idnos.join("");

              this.retCode = datas;
              this.bizstname = this.bizsts[datas.bizst];

              //  console.log(decodeURI(datas.message))
              this.names = decodeURI(datas.name);
            } else {
              this.retCode = data.data;
            }
            // this.retCode=data.data
            //  decodeURIComponent
            //  decodeURI(s)
          });
        return console.log(111);
      } else {
        return console.log(222, this.values);
      }

      //console.log(this.cardtypes,this.identityNo)
      // console.log(this.getDateString(),this.getTimeString(),this.tokens,this.randomKey)
    },
  },
};
</script>


<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../common/stylus/mixin.styl';

// 动画
.fade-enter-active {
  transition: all 0.2s ease;
}

.fade-leave-active {
  transition: all 0.2s;
}

.fade-enter, .fade-leave-to {
  transform: translateY(120px);
  opacity: 0;
}

// 外层盒子
.bb {
  font-size: 14px;
}

.student_card {
  width: 100%;
  height: 100%;
  .Loding {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 9999998;
    overflow: hidden;
  }

  .group {
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 15px 0 16px;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 14px;

    .group_name {
      text-align: center;
      line-height: 60px;
    }

    .group_option {
      display: flex;
      justify-content: center;
      align-items: center;

      .svgs {
        width: 14px;
        height: 14px;
        margin-left: 16px;
      }
    }
  }

  .select_import {
    margin-top: 8px;
    background: #ffffff;
    font-size: 14px;
    padding-left: 16px;
    box-sizing: border-box;

    .select_school {
      padding-right: 15px;
      box-sizing: border-box;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;

      // border-bottom thin solid #E6E6E6
      .school_opt {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .select_school:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0rem;
      background: #E6E6E6;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

    .school_name {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      line-height: 14px;
    }

    .select_name {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #999999;
      letter-spacing: 0;
      text-align: right;
      line-height: 14px;
    }

    .selects {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      text-align: right;
      line-height: 14px;
    }

    .svgs {
      width: 14px;
      height: 14px;
      margin-left: 14px;
    }

    .card {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;

      .card_name {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        line-height: 14px;
      }

      .card_number {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        height: 100%;
        color: #999999;
        letter-spacing: 0;
        text-align: right;
        line-height: 14px;
        margin-right: 16px;
        flex: 1;
        outline: none;
        border: none;
      }
    }
  }

  .box {
    height: 44px;
    margin-top: 16px;
    padding: 0 16px;
    box-sizing: border-box;

    .but {
      width: 100%;
      height: 44px;
      background: #008DEE;
      border-radius: 5px;
      font-family: PingFangSC-Regular;
      font-size: 17px;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: center;
      line-height: 17px;
      text-align: center;
      line-height: 44px;
    }

    .but_style {
      background: #cccccc;
    }
  }

  // 遮罩
  .shade_names {
    height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .node {
    display: none;
  }

  .shade {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);

    .shade_name {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #ffffff;

      .borders {
        // border-bottom thin solid #E6E6E6
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-family: PingFangSC-Regular;
        font-size: 17px;
        color: #333333;
        letter-spacing: -0.41px;
        text-align: center;
        position: relative;
        background: #ffffff;
        // border:none
      }

      .borders:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0rem;
        background: #E6E6E6;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
      }

      .borders:last-child:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0;
        background: #ffffff;
      }
    }
  }

  // 查询结果
  .inquire {
    padding: 0 16px;
    box-sizing: border-box;
    margin-top: 24px;

    .result {
      height: 24px;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      line-height: 24px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .message {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #999999;
      letter-spacing: 0;
      line-height: 24px;
    }

    .messages {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #999999;
      letter-spacing: 0;
      line-height: 24px;
    }
  }
}
</style>
